<template>
  <common-link :path="$route.params.lang?$route.path.replace(`/${$route.params.lang}`,''):$route.path"
    :query="resetPath()"
    class="search-item go-search-item">
    <label class="el-checkbox"
      :class="{'is-checked': $route.query[queryName] && source.value === $route.query[queryName]}">
      <span class="el-checkbox__input"
        :class="{'is-checked': $route.query[queryName] && source.value === $route.query[queryName]}">
        <span class="el-checkbox__inner"></span>
        <input type="checkbox"
          class="el-checkbox__original">
      </span>
      <span class="el-checkbox__label">
        <img v-if="hasIcon"
          :src="getImage(source.value)"
          class="checkbox-image"
          :alt="source.label"
          srcset="" />
        <span>
          {{ source.label }}
        </span>
      </span>
    </label>
  </common-link>
</template>
<script>
export default {
  name: 'SearchItem',
  props: {
    source: {
      type: Object,
      default: () => ({}),
    },
    hasIcon: {
      type: Boolean,
      defalut: false,
    },
    queryName: {
      type: String,
      defalut: '',
      require: true,
    },
  },
  methods: {
    //判断是否有图片
    getImage(name) {
      try {
        const image = require('@/static/images/flags/' + name + '.png')
        if (image) {
          return image
        } else {
          return ''
        }
      } catch (error) {
        //console.log(error)
      }
    },
    /* 链接 */
    resetPath() {
      let newPath = { ...this.$route.query }
      if (this.queryName) {
        newPath[this.queryName] = this.source.value
      }

      for (let key in newPath) {
        if (newPath[key] === null || newPath[key] === '') {
          delete newPath[key]
        }
      }

      return { ...newPath }
    },
  },
}
</script>
<style lang="scss" scoped>
.search-item {
  height: 30px;
  ::v-deep .el-checkbox__label {
    padding-left: 10px;
  }
  .checkbox-image {
    width: 22px;
    height: 15px;
    margin-right: 9px;
    vertical-align: middle;
  }
  ::v-deep .el-checkbox {
    padding: 10px 10px 10px 0;
    display: flex;
    align-items: center;
    width: 100%;
    .el-checkbox__label {
      display: flex;
      align-items: center;
    }
    .el-checkbox__inner {
      width: 16px;
      height: 16px;
      &::after {
        height: 8px;
        left: 4px;
        width: 5px;
      }
    }
  }
  &:hover {
    cursor: pointer;
    ::v-deep .el-checkbox {
      .el-checkbox__inner {
        border-color: #7150e6;
      }
      .el-checkbox__label {
        color: #7150e6;
      }
    }
  }
}
</style>
